<div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">物业管理</a></li>
            <li><a href="#">增加物业</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-12">
        <div class="box">
            <div class="box-header">
                <div class="box-icons">
                    <a class="expand-link">
                        <i class="fa fa-expand"></i>
                    </a>
                </div>
                <div class="no-move"></div>
            </div>
            <div class="box-content">
                <div class="row">
                    <div class="col-md-6">
                        <form id="addPropertyForm" method="post"
                              class="form-horizontal">
                            <fieldset>
                                <legend>添加物业信息</legend>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">选择园区</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" name="villageId" id="villageList">
                                            <option value="">--选择园区--</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-3 control-label">选择楼栋</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" name="buildingId" id="buildingList">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">房产编号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="code"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">物业类型</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="type" id="ssss">
                                            <option value="1">商户</option>
                                            <option value="2">住宅</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">地址</label>

                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="location"/>
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="col-sm-2 control-label">面积</label>
                                    <div class="col-sm-9">
                                        <input type="text" id="propertySquare" name="propertySquare"
                                               class="form-control" placeholder="单位/平方米">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">状态</label>
                                    <div class="col-sm-9">
                                        <select name="status" id="" class="form-control">
                                            <option value="-1">出租</option>
                                            <option value="1">自用</option>
                                        </select>
                                    </div>
                                </div>
                            </fieldset>
                            <div class="form-group">
                                <div class="col-sm-5 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">保存物业</button>
                                    <button type="button" id="addOwnerBtn" class="btn btn-primary">添加业主</button>
                                </div>
                            </div>
                        </form>
                        <form id="ownerAddForm" method="post" action="" class="form-horizontal">
                            <fieldset>
                                <legend>添加业主</legend>
                                <div class="form-group">
                                    <div class="col-sm-6">
                                        <input type="hidden" class="form-control" id="propertyID" name="propertyID" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="name" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="sex">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">电话号码</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="phone" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">证件类型</label>
                                    <div class="col-sm-9">
                                        <select name="identityType" class="form-control" id="identityType">
                                            <option value="1">身份证</option>
                                            <option value="2">军人证</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">证件号码</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="identityCode" />
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="col-sm-2 control-label">入住时间</label>
                                    <div class="col-sm-9">
                                        <input type="text" id="authTime" name="authTime"
                                               class="form-control input_date" placeholder="">
                                    </div>
                                </div>
                            </fieldset>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">确定添加</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <form id="uploadForm" action="" class="form-horizontal">
                            <fieldset>
                                <legend>批量导入物业信息</legend>
                                <br/>
                                <input type="file" name="file"/>
                                <br/>
                                <input type="button" class="btn btn-primary" id="submitBtn" value="提交"/>
                            </fieldset>
                        </form>
                        <div class="row">
                            <div class="col-md-12" id="importInfo">
                                <h4 id="countArea"></h4>
                                <div style="height:400px;overflow: auto;">
                                    <ol id="errorArea">

                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <form id="uploadBindForm" action="" class="form-horizontal">
                            <fieldset>
                                <legend>批量导入业主信息</legend>
                                <br/>
                                <input type="file" name="file"/>
                                <br/>
                                <input type="button" class="btn btn-primary" id="submitBindBtn" value="提交"/>
                            </fieldset>
                        </form>
                        <div class="row">
                            <div class="col-md-12" id="importBindInfo">
                                <h4 id="countBindArea"></h4>
                                <div style="height:400px;overflow: auto;">
                                    <ol id="errorBindArea">

                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">


    $("#submitBtn").click(function(){
        var formData = new FormData($("#uploadForm")[0]);
        $(this).attr("disabled","disabled");
        $("#importInfo #countArea").html("");
        $("#importInfo #errorArea").html('<button class="btn btn-danger btn-app btn-circle" type="button">' +
                '<i class="fa fa-spinner fa-spin"></i></button>');
        $.ajax({
            url: urlConfig.propertyImport ,
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                if(result.status)
                {
                    var html="";
                    var coutInfo="<font color='green'>成功条数:"+result.jsonString.succNum+
                            "</font>/<font color='red'>失败条数:"+result.jsonString.errorNum+
                            "</font>";
                    $("#importInfo #countArea").html(coutInfo);
                    var errors=result.jsonString.errorDescription;
                    if(errors!=null&&errors!="")
                    {
                        $.each(errors,function(k,v){
                            html+="<li>"+v+"</li>"
                        });
                    }
                    $("#importInfo #errorArea").html(html);
                }
                else
                {
                    alert(result.errorMsg.description);
                    $("#importInfo #errorArea").html("");
                }
                $("#submitBtn").removeAttr("disabled");
                console.log(result);
            },
            error: function () {
                alert("服务器连接失败,请重试!");
                $("#submitBtn").removeAttr("disabled");
                $("#importInfo #errorArea").html("");
            }
        });
    });

    $("#submitBindBtn").click(function(){
        var formData = new FormData($("#uploadBindForm")[0]);
        $(this).attr("disabled","disabled");
        $("#importBindInfo #countBindArea").html("");
        $("#importBindInfo #errorBindArea").html('<button class="btn btn-danger btn-app btn-circle" type="button">' +
                '<i class="fa fa-spinner fa-spin"></i></button>');
        $.ajax({
            url: urlConfig.bindImport ,
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                if(result.status)
                {
                    var html="";
                    var coutInfo="<font color='green'>成功条数:"+result.jsonString.succNum+
                            "</font>/<font color='red'>失败条数:"+result.jsonString.errorNum+
                            "</font>";
                    $("#importBindInfo #countBindArea").html(coutInfo);
                    var errors=result.jsonString.errorDescription;
                    if(errors!=null&&errors!="")
                    {
                        $.each(errors,function(k,v){
                            html+="<li>"+v+"</li>"
                        });
                    }
                    $("#importBindInfo #errorBindArea").html(html);
                }
                else
                {
                    alert(result.errorMsg.description);
                    $("#importBindInfo #errorBindArea").html("");
                }
                $("#submitBindBtn").removeAttr("disabled");
                console.log(result);
            },
            error: function () {
                alert("服务器连接失败,请重试!");
                $("#submitBindBtn").removeAttr("disabled");
                $("#importBindInfo #errorBindArea").html("");
            }
        });
    });

    //获取楼栋列表
    $("#villageList").change(function(){
        var villageId=$("#villageList option:selected").val();
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.getBuildingSelect2+villageId,
            dataType: "json",
            success: function (result) {
                if (result.status) {
                    if(result.jsonString!=null)
                    {
                        var options="<option value=''>--请选择--</option>";
                        for(var i in result.jsonString)
                        {
                            options+="<option value='"+result.jsonString[i].id+"'>"+result.jsonString[i].text+"</option>";
                        }
                        $("#buildingList").html(options);
                    }
                    else
                    {
                        $("#buildingList").html("<option value=''>--没有相应的楼栋--</option>");
                    }
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });

    });

    //验证物业信息的合法性
    function propertyAddValidator() {
        $('#addPropertyForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                code: {
                    validators: {
                        notEmpty: {
                            message: '房产编号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9A-Za-z]+$/,
                            message: '房产编号只能为数字和字母的组合'
                        }
                    }
                },
                location:{
                    validators: {
                        notEmpty: {
                            message: '地址不能为空'
                        }
                    }
                },
                buildingId:{
                    validators: {
                        notEmpty: {
                            message: '请选择楼栋'
                        }
                    }
                },
                propertySquare: {
                    validators: {
                        notEmpty: {
                            message: '面积不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '面积只能为两位小数或整数'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            e.preventDefault();
            submitPropertyForm();
        });
    }

    //验证业主信息的合法性
    function ownerAddValidator(){
        $('#ownerAddForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                name: {
                    message: '用户名不合法',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '用户名在2到10个字符之间'
                        }
                    }
                },
                identityCode:{
                    validators: {
                        notEmpty: {
                            message: '证件号码不能为空'
                        },
                        regexp: {
                            regexp:/^[A-Za-z0-9]+$/,
                            message: '证件号码只能为数字或者字母的组合'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        regexp: {
                            regexp: /^1[3-8][0-9]{9}$/,
                            message: '电话号码不合法'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            e.preventDefault();
            submitOwnerForm();
        });
    }

    //验证通过后提交物业信息表单
    function submitPropertyForm()
    {
        var data=$("#addPropertyForm").serializeArray();
        console.log(data);
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.addProperty,
            data: data,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("添加成功");
                    $("#addOwnerBtn").show();
                    $("#propertyID").val(result.jsonString);
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                $("#addOwnerBtn").show();
                $("#propertyID").val(result.jsonString);
                alert("服务器连接失败,请重试!");
            }
        });
//        console.log(data);
    }

    //验证通过后提高业主信息表单
    function submitOwnerForm()
    {
        var data=$("#ownerAddForm").serializeArray();
        console.log(data);
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.addOwner,
            data: data,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    var con=confirm("添加成功,是否继续添加?");
                    if(con)
                    {
                        $("#ownerAddForm")[0].reset();
                    }
                    else
                    {
                        $("#addPropertyForm")[0].reset();
                        $("#ownerAddForm")[0].reset();
                        $("#addOwnerBtn").hide();
                        $("#ownerAddForm").hide();
                    }
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }

    $("#addOwnerBtn").click(function(){
        if($("#ownerAddForm").css('display')=='none')
        {
            $("#ownerAddForm").slideDown("10000");
            $("#addOwnerBtn").text("取消添加");
        }
        else
        {
            $("#ownerAddForm").slideUp("10000");
            $("#addPropertyForm")[0].reset();
            $("#ownerAddForm")[0].reset();
            $("#addOwnerBtn").hide();
        }
//        $("#ownerAddForm").show();
    });

    $(document).ready(function() {
        $("#addOwnerBtn").hide();
        $("#ownerAddForm").hide();
        initVillageSelect();
        LoadBootstrapValidatorScript(propertyAddValidator);
        LoadBootstrapValidatorScript(ownerAddValidator);
        $('.input_date').datepicker({setDate: new Date(),dateFormat:"yy-mm-dd",
            showButtonPanel:true,
            closeText:"关闭",
            yearSuffix: '年',
            currentText:'今天',
            showMonthAfterYear:true,
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            dayNamesMin: ['日','一','二','三','四','五','六']
        });
    });
</script>
